<template>

  <div class="flex flex-wrap gap-4" style="margin-bottom: 20px;">
    <el-card style="font-size: 15px;font-weight: bold" shadow="always"><span style="color: #535bf2">|</span> 数据统计控制台
    </el-card>
  </div>
  <div class="welcome">
    <div class="left">
      <div class="left-main">
        <img class="welcome-img" src="../assets/welcome-logo.svg">
        <div class="welcome-text">
          <div class="welcome-title">Admin，下午好！欢迎回来！</div>
          <div class="welcome-note">开源等于互助；开源需要大家一起来支持，支持的方式有很多种，比如使用、推荐、写教程、保护生态等；欢迎您加入我们！</div>
        </div>
      </div>
    </div>

    <div class="right">
      <img class="working-coffee" src="../assets/time.svg">
      <div class="working-text">
        您今天已工作了
        <span>{{ one }}时{{ two }}分{{ three }}秒</span>
      </div>
    </div>

  </div>




</template>

<script>

import {doGet} from "../http/httpRequest.js";

export default {
  name: "StatisticsView",
  data() {
    return {
      summaryData: {},
      flag: null,
      one: '00', // 时
      two: '00', // 分
      three: '00', // 秒
      abc: 0, // 秒的计数
      cde: 0, // 分的计数
      efg: 0, // 时的计数
      annunciateList: [],
      annunciateDialogVisible: false,
      annunciateQuery: {}

    }
  },

  mounted() {
    // this.startHandler();
    // this.loadStatistics();
    // this.loadAnnunciateList();
  },

  methods: {
    loadStatistics() {
      doGet("/api/statistics").then((resp) => {
        if (resp.data.code === 200) {
          this.summaryData = resp.data.data
        }
      })
    },


    // 开始计时
    startHandler() {
      this.flag = setInterval(() => {
        if (this.three === 60 || this.three === '60') {
          this.three = '00';
          this.abc = 0;
          if (this.two === 60 || this.two === '60') {
            this.two = '00';
            this.cde = 0;
            if (this.efg + 1 <= 9) {
              this.efg++;
              this.one = '0' + this.efg;
            } else {
              this.efg++;
              this.one = this.efg;
            }
          } else {
            if (this.cde + 1 <= 9) {
              this.cde++;
              this.two = '0' + this.cde;
            } else {
              this.cde++;
              this.two = this.cde;
            }
          }
        } else {
          if (this.abc + 1 <= 9) {
            this.abc++;
            this.three = '0' + this.abc;
          } else {
            this.abc++;
            this.three = this.abc;
          }
        }

      }, 1000)
    },

    loadAnnunciateList() {

      doGet("/api/annunciate").then((resp) => {
        this.annunciateList = resp.data.data

      })
    },

    annunciateDetail(id) {
      doGet("/api/annunciate/" + id).then((resp) => {
        if (resp.data.code===200){
          this.annunciateQuery=resp.data.data;
          this.annunciateDialogVisible=true;
        }
      })
    }
  }
}
</script>

<style scoped>
.welcome {
  position: relative;
  /*width: 1800px;*/
  height: 130px;

  border-radius: 6px;
}

.left {
  position: absolute;
  width: 1050px;
  height: 130px;
  background-color: #e1eaf9;
  border-radius: 6px;
}

.left-main {
  position: absolute;
  width: 1300px;
  height: 100px;

  border-radius: 6px;
  margin-left: 25px;
  margin-top: 15px;
}

.welcome-img {
  float: left;
  height: 100px;
}

.welcome-text {
  width: 1100px;
  height: 76px;

  margin-left: 152px;
  margin-top: 13px;
}

.welcome-title {
  width: 1100px;
  height: 30px;

  font-size: 1.5rem;
  line-height: 30px;
  color: #3f6ad8;
}

.welcome-note {
  width: 1100px;
  height: 30px;
  margin-top: 16px;
  padding-top: 6px;
  font-size: 15px;
  color: #303133;
}


.right {

  float: right;
  width: 435px;
  height: 130px;

  border-radius: 6px;
}

.working-coffee {
  width: 80px;
  margin-left: 160px;
}

.working-text {
  width: 435px;
  height: 46px;

  text-align: center;
  line-height: 46px;
}

.boxList {

  position: relative;
  /*width: 1800px;*/
  width: auto;
  height: 145px;
  margin-top: 20px;
}

.listOne {

  float: left;
  width: 420px;
  height: 145px;
  background-color: #ffffff;
  border-radius: 4px;

  transition: all 0.3s;
}

.listOne:hover {

  background-color: #e1eaf9;
  color: #ffffff;
  cursor: pointer;
  transform: scaleY(1.1);

}

.listTwo, .listThree, .listFour {
  float: left;
  width: 420px;
  height: 145px;
  background-color: #ffffff;
  border-radius: 4px;
  margin-left: 13px;
  transition: all 0.3s;
}

.listTwo:hover, .listThree:hover, .listFour:hover {
  background-color: #e1eaf9;
  color: #ffffff;
  cursor: pointer;
  transform: scaleY(1.1);
}

.listOne-main {

  width: 420px;
  height: 120px;
  margin-left: 10px;
  margin-top: 12px;
}

.listOne-main-top {
  width: 420px;
  height: 40px;

  text-align: center;
  line-height: 40px;
  color: #92969a;
  font-size: 15px;

}

.listOne-main-bom {
  width: 420px;
  height: 60px;
  margin-top: 10px;
  text-align: center;

  font-size: 26px;
  color: #303133;
}

.annunciate {
  width: 420px;
  height: 500px;
  background-color: #ffffff;
  margin-top: 20px;
  padding-top: 20px;

}

</style>